"use client"
import {cn} from "@/lib/utils"
import {Button} from "@/components/ui/button"
import {Card, CardContent} from "@/components/ui/card"
import {Field, FieldGroup, FieldLabel,} from "@/components/ui/field"
import {Input} from "@/components/ui/input"
import {login} from "@/net/api/auth.api"
import {useState} from "react";

export function LoginForm({
                              className,
                              ...props
                          }: React.ComponentProps<"div">) {
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");

    function handleSubmit() {
        console.log(email, password);
        login({username: email, password});

    }

    return (
        <div className={cn("flex flex-col gap-6", className)} {...props}>
            <Card className="overflow-hidden p-0">
                <CardContent className="grid p-0 md:grid-cols-2">
                    <form className="p-6 md:p-8">
                        <FieldGroup>
                            <div className="flex flex-col items-center gap-2 text-center pt-6">
                                <h1 className="text-2xl font-bold">欢迎回来</h1>
                                <p className="text-muted-foreground text-balance">
                                    请输入您的电子邮件和密码，以继续登录。
                                </p>
                            </div>
                            <Field>
                                <FieldLabel htmlFor="email">
                                    <svg  className="icon" viewBox="0 0 1024 1024" version="1.1"
                                         xmlns="http://www.w3.org/2000/svg" p-id="10473" width="24" height="24">
                                        <path
                                            d="M535.296 553.92c69.76-41.92 116.352-116.416 116.352-200.192a238.4 238.4 0 0 0-237.44-237.376c-130.304 0-246.656 107.072-246.656 237.44 0 83.712 46.528 158.208 116.352 200.128-125.632 46.528-214.08 167.552-214.08 311.808 0 23.296 18.56 41.92 41.856 41.92 23.296 0 41.92-18.624 41.92-41.92 0-139.648 116.352-256 256-256 144.32 0 256 116.352 256 256 0 23.296 18.56 41.92 41.92 41.92 23.232 0 41.856-18.624 41.856-41.92 0-139.648-88.448-260.608-214.08-311.808zM409.6 512a156.928 156.928 0 0 1-158.272-158.272A156.928 156.928 0 0 1 409.6 195.52a156.928 156.928 0 0 1 158.272 158.208A156.928 156.928 0 0 1 409.6 512z m353.728-167.552h153.6c23.296 0 37.248-18.624 37.248-37.248a36.736 36.736 0 0 0-37.248-37.248h-153.6a36.736 36.736 0 0 0-37.248 37.248c-4.608 18.56 14.016 37.248 37.248 37.248z m153.6 69.76h-195.456a36.736 36.736 0 0 0-37.248 37.312c0 23.232 18.56 37.184 37.248 37.184h195.456c23.296 0 37.248-18.56 37.248-37.184s-18.56-37.248-37.248-37.248z m0 148.992h-153.6a36.736 36.736 0 0 0-37.248 37.248c0 23.232 18.624 37.248 37.248 37.248h153.6c23.296 0 37.248-18.624 37.248-37.248s-18.56-37.248-37.248-37.248z"
                                            fill="currentColor" p-id="10474"></path>
                                    </svg>
                                    账号</FieldLabel>
                                <Input
                                    id="email"
                                    type="text"
                                    placeholder="登录账号/邮箱/手机号码"
                                    required
                                    onChange={(event) => setEmail(event.target.value)}
                                />
                            </Field>
                            <Field>
                                <div className="flex items-center">
                                    <FieldLabel htmlFor="password">
                                        <svg viewBox="0 0 1024 1024" version="1.1"
                                             xmlns="http://www.w3.org/2000/svg" width="24" height="24">
                                            <path
                                                d="M815.712 226.56c-50.24-54.784-125.6-82.208-200.96-73.088-93.632 11.424-171.264 82.208-191.808 175.84-6.848 36.544-6.848 73.088 2.272 107.328L151.2 710.656c-4.576 4.576-6.848 9.12-6.848 16V856.8c0 13.696 9.12 22.848 22.848 22.848h130.144c13.696 0 22.848-9.12 22.848-22.848v-54.784h57.088c13.696 0 22.848-9.12 22.848-22.848v-54.784h54.816c13.696 0 22.848-9.12 22.848-22.848v-54.784h54.784c13.696 0 22.848-9.12 22.848-22.848 0-16 13.696-29.696 29.696-25.12 27.392 9.12 57.088 9.12 86.784 6.848 107.328-11.424 191.808-98.208 200.96-203.232 6.848-66.24-13.696-127.904-57.088-175.84z m11.424 171.264c-6.848 84.48-75.36 152.992-159.84 162.112-25.12 4.576-47.968 2.272-70.784-4.576-6.848-2.272-11.424-2.272-18.272-2.272-29.696 0-57.088 20.544-66.208 47.968h-59.36c-13.696 0-22.848 9.12-22.848 22.848v54.784h-54.816c-13.696 0-22.848 9.12-22.848 22.848v54.784h-54.816c-13.696 0-22.848 9.12-22.848 22.848v54.784h-84.48v-98.176l278.592-278.592c4.576-4.576 6.848-13.696 4.576-22.848-9.12-29.696-11.424-63.936-4.576-95.904 16-73.088 77.632-132.448 152.992-141.568 59.36-6.848 118.752 16 159.84 59.36 34.24 38.816 50.208 89.056 45.664 141.568zM646.72 263.104c-63.936 0-114.176 50.24-114.176 114.176s50.24 114.176 114.176 114.176 114.176-50.24 114.176-114.176-50.24-114.176-114.176-114.176z m0 182.656c-38.816 0-68.512-29.696-68.512-68.512s29.696-68.512 68.512-68.512 68.512 29.696 68.512 68.512-29.696 68.512-68.512 68.512z"
                                                fill="currentColor"></path>
                                        </svg>
                                        密码</FieldLabel>

                                </div>
                                <Input id="password" type="password" required
                                       onChange={(event) => setPassword(event.target.value)}/>
                            </Field>
                            <Field>
                                <Button type="button" onClick={handleSubmit}> Login</Button>
                            </Field>


                        </FieldGroup>
                    </form>
                    <div className="bg-muted relative hidden md:block">
                        <img
                            src="/static/1.jpg"
                            alt="Image"
                            className="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
                        />
                    </div>
                </CardContent>
            </Card>
            <div className="text-center text-sm text-muted-foreground">
                copyright © 2022 All rights reserved.
            </div>

        </div>
    )
}
